<template>
    <div>
        子组件
        <el-select v-model="selectValueRes" @change="selectChange" class="m-2" placeholder="Select" size="large">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
        </el-select>
        <el-button @click="clickselectValueRes">click</el-button>
    </div>
</template>

<script  setup>
    import {ref,reactive,defineProps,defineComponent,defineEmits,defineExpose,computed,watch} from 'vue'
    // const obj = defineProps(['count',"str",'people',"hobby"]) // 父传子
    // obj 是一个大的对象
    const obj = defineProps({
        count: Number,
        str: {type:String,default:"123456"},
        people: Object,
        hobby: Array,
        selectValue:Number
    })

    const emits = defineEmits(["update:selectValue"])// 子触发父的方法并携带参数

    const x = reactive({a:'a'})
    const x2 = ref(20)
    // let selectValue = ref(0)

    let selectValueRes = computed({
        set(val){
            emits('update:selectValue', val)
        },
        get(){
            return obj.selectValue
        }
    })
    watch(selectValueRes,(newValue,oldValue)=>{
        console.log('selectValueRes newValue',newValue)
        console.log('selectValueRes oldValue',oldValue)
    })
    const options = [
        {
            value: 1,
            label: 'Option1',
        },
        {
            value: 2,
            label: 'Option2',
        },
        {
            value: 3,
            label: 'Option3',
        }
    ]

    //定义一个参数暴露给父组件
    // const x2 = 123;
    //定义一个方法暴露给子组件
    const funca = () => {
        console.log("子组件中的方法");
    }

    const selectChange =(val) =>{
        console.log("selectChange",val);
    }
    const clickselectValueRes=()=>{
        console.log("selectValueRes",selectValueRes.value);
    }
    //将参数a和函数funca暴露给父组件
    defineExpose({
        x2,
        funca
    });

</script>

<style scoped>

</style>